/* 
      target            {left:"300px",opactity:0.5}
      将target转换为    {left:[300,"px"],opacity:[0.5,""]} 
      */
function updateTarget(target) {
  for (var key in target) {
    var value = target[key];
    var num = parseFloat(value);
    var unit = (value + "").slice((num + "").length);
    target[key] = [num, unit];
  }
  // console.log("updateTarget", target);
}

/**
 * 动画轮子（wheel）
 * @param {HTMLElement} el 想要做动画的元素
 * @param {Object} target 元素的目标状态
 * @param {number} timeCost 动画耗时（毫秒）
 * @param {Function} callback 动画结束时的回调函数
 */
function animate(
  el, //想让谁动
  target = { left: 300, top: 400 }, //目标状态
  timeCost = 1000, //时间消耗
  callback = function () {
    console.log("动画结束");
  } //动画结束时干点啥（回调）
) {
  /* 提前运算left和top每帧的偏移量（动画速度） */
  // 动画速度 = (目标值-初始值)/帧数
  // var leftOffset = (target.left-parseFloat(getComputedStyle(el).left))/(timeCost/40)
  // var topOffset = (target.top-parseFloat(getComputedStyle(el).top))/(timeCost/40)
  updateTarget(target);
  for (var key in target) {
    var valueArr = target[key]; //[300 "px"]
    var offset =
      (valueArr[0] - parseFloat(getComputedStyle(el)[key])) / (timeCost / 40);
    valueArr.push(offset); //{left:[300,"px",10]}
  }
  // console.log(target);

  var timer = setInterval(function () {
    // el.style.left = parseFloat(window.getComputedStyle(el).left) + leftOffset + "px";
    /* 每一帧每个属性都应该偏移【一个动画速度】 */
    for (var key in target) {
      var valueArr = target[key]; //{left:[300,"px",10]}
      el.style[key] =
        parseFloat(window.getComputedStyle(el)[key]) +
        valueArr[2] +
        valueArr[1];
    }
  }, 40);

  /* 只要时间一到 */
  setTimeout(function () {
    // 清除动画定时器（此时可能存在误差 原则上1000毫秒 实际可能1001毫秒 999毫秒）
    clearInterval(timer);

    /* 动画结束以后非常不要脸地将元素暴力设置为目标状态（别担心，用户看不出来） */
    for (var key in target) {
      var valueArr = target[key]; //{left:[300,"px",10]}
      el.style[key] = valueArr[0] + valueArr[1];
    }

    // 动画结束时回调callback函数
    callback();
  }, timeCost);
}
